<template>
    <div class="container">
        <van-form @submit="onSubmit">
            <van-cell-group>
                <van-field name="name" v-model="name" label="姓名" placeholder="请输入" />
                <van-field name="phone" v-model="phone" label="联系方式" placeholder="请输入" :rules="[{ validator: phoneValidator, message: '请输入正确手机号' }]" />
                <van-field name="addWxWork" label="是否添加企微">
                    <template #input>
                        <van-radio-group v-model="addWxWork" direction="vertical">
                            <van-radio name="1">是</van-radio>
                            <van-radio name="0">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="source" v-model="source" label="客户来源" placeholder="请输入" />
                <van-field name="idcardNo" v-model="idcardNo" label="身份证" placeholder="请输入" :rules="[{ validator: idCardValidator, message: '请输入正确身份证号' }]" />
                <van-field name="area" v-model="area" label="所在地区" placeholder="请输入" />
                <van-field v-model="remark" name="remark" label="备注" placeholder="备注" />
            </van-cell-group>
            <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </van-form>
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />
    </div>
</template>

<script>
    import { CUSTOMERTYPE } from "@/utils/enumConfig";
    import { add, getDetail, edit } from "@/api/customer";
    import { Toast } from "vant";
    export default {
        /*从Detail返回List时，修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面
         */
        beforeRouteLeave(to, from, next) {
            console.log("tototo", to);
            if (to.name === "customerInfo") {
                to.meta.keepAlive = true;
            }
            next();
        },
        data() {
            return {
                id: null,
                showCalendar: false,
                CUSTOMERTYPE: CUSTOMERTYPE,
                area: "",
                name: "",
                source: "",
                idcardNo: "",
                phone: "",
                addWxWork: "0",
                remark: "",
            };
        },
        async mounted() {
            let id = this.$route.query.id;
            if (id) this.id = id;
            let customerInfo = await getDetail({ id }),
                _this = this;
            if (customerInfo) {
                Object.keys(customerInfo).forEach((key) => {
                    if (key === "addWxWork") {
                        _this[key] = customerInfo[key] === 1 ? "1" : "0";
                    } else {
                        _this[key] = customerInfo[key];
                    }
                });
            }
        },
        methods: {
            async onSubmit(values) {
                let _this = this;
                this.id ? (values["id"] = this.id) : null;
                let res = !this.id ? await add(values) : await edit(values);
                if (res.code === 1) {
                    Toast.success("保存成功！");
                    setTimeout(() => {
                        _this.$router.go(-1);
                    }, 2000);
                }
            },
            onConfirm(date) {
                let _this = this;
                this[_this.curKey] = this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
                this.showCalendar = false;
            },
            openCalendar(key) {
                this.curKey = key;
                this.showCalendar = true;
            },
            phoneValidator(val) {
                if (!/^1[3456789]\d{9}$/.test(val)) {
                    return false;
                }
            },
            idCardValidator(val) {
                if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
                    return false;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        padding-bottom: 20px;
        ::v-deep .van-radio {
            margin-top: 10px;
        }
        button {
            width: 80%;
            margin: 20px auto 0;
        }
    }
</style>